<template>
  <div class="common_wrap">
    <div class="common_title">指标数据录入<div class="back_btn" @click="goBack"><i></i><span>返回</span></div></div>
    <el-form :model="form" ref="importForm" label-width="100px" class="demo-dynamic">
      <el-form-item
          prop="id"
          label="期号"
          :rules="[
            { required: true, message: '选择期号', trigger: 'blur' },
          ]"
      >
        <el-date-picker
            v-model="form.id"
            format="yyyy-MM"
            type="month"
          />
      </el-form-item>
      <el-form-item
          prop="quota"
          label="选择指标"
          :rules="[
            { required: true, message: '选择指标', trigger: 'blur' },
          ]"
      >
        <el-select v-model="form.quota" placeholder="请选择指标" filterable clearable>
            <el-option v-for="(item,i) in quotaList" :key="i" :value="item.value" :label="item.lable" />
          </el-select>
      </el-form-item>
      <el-form-item
          prop="quotaData"
          label="数据录入"
      >
       <el-table ref="table" class="input_table" border :data="tableData">
        <el-table-column prop="areaName" label="区域" align="center" />
        <el-table-column prop="num1" label="任务数(亩)" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num1" maxlength="16" size="mini" />
          </template>
        </el-table-column>
        <el-table-column prop="num2" label="完成数(亩)" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num2" maxlength="16" size="mini" />
          </template>
        </el-table-column>
        <el-table-column prop="num3" label="完成率(%)" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num3" maxlength="16" size="mini" />
          </template>
        </el-table-column>
        <el-table-column prop="position" label="位次" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.position" maxlength="16" size="mini" type="number"  />
          </template>
        </el-table-column>
      </el-table>
      </el-form-item>
      <el-form-item style="text-align:center">
        <el-button>取消</el-button>
        <el-button type="primary">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "KeyIndicatorsImport",
  data(){
    return{
      form:{
        id:'',
        quota:'',
        quotaData:''
      },
      quotaList:[],
      tableData:[
        {
          areaName:'鹿城区',
          num1:'1',
          num2:'2',
          num3:'3',
          position:'4'
        }
      ]
    }
  },
  created(){
    
  },
  methods:{
    goBack(){
      history.go(-1)
    },

  }
}
</script>

<style scoped>
.input_table >>> .el-input__inner{
  width: 80px;
  text-align: center;
}
</style>